<template>
    <div class="drop" :class="{ dropActive:drop }" @click="drop = !drop">
        <div class="menu">
<!--            <i class="fa fa-folder-open" aria-hidden="true"></i>-->
            <icon-svg class="folder" icon-class="folder"/>
            <span>文件</span>
        </div>
        <div v-if="drop" id="menu-bar">
            <ul class="menu-wrap">
                <!-- <li class="menu-item">打开</li>-->
                <li class="menu-item" @click="newProject">新项目</li>
                <!-- <li class="menu-item">模板作品</li>-->
                <li class="menu-item" @click="download">保存到电脑</li>
                <li class="menu-item" @click="upload">从电脑上传</li>
            </ul>
            <input type="file" id="files" accept=".py" v-on:change="getFile"/>
        </div>
    </div>
</template>

<script>
import Editor from '../../common/editor'
export default {
  name: 'menu-drop',
  data () {
    return {
      drop: false,
      dropActive: 'active'
    }
  },
  props: {
    works: {
      type: Array
    },
    target: {
      type: Number
    }
  },
  mounted () {
    // 点击其他区域关闭菜单栏
    document.addEventListener('click', (e) => {
      if (!this.$el.contains(e.target)) this.drop = false
    })
  },
  methods: {
    download: function () {
      let editor = Editor.getEditor()
      // 创建隐藏的可下载链接
      let link = document.createElement('a')
      link.download = this.works[this.target].name
      link.style.display = 'none'
      // 字符内容转变成blob地址
      let content = editor.getValue()
      let blob = new Blob([content])
      link.href = URL.createObjectURL(blob)
      // 触发点击
      document.body.appendChild(link)
      link.click()
      // 然后移除
      document.body.removeChild(link)
    },
    upload: function () {
      document.getElementById('files').click()
    },
    getFile: function (e) {
      let that = this
      const file = e.target.files[0]
      let name = file.name
      console.log('文件名:' + name)

      let reader = new FileReader()
      reader.readAsText(file, 'gb2312')

      reader.onload = function () {
        that.$emit('updateFromLocal', {name: name, content: this.result})
      }
    },
    newProject: function () {
      this.$emit('newProject')
    }
  }
}
</script>

<style scoped>
    .drop{
        position: relative;
        display: inline-block;
        color: white;
        width: 95px;
        height: 100%;
        text-align: center;
        line-height: 48px;
        vertical-align: top;
        /*margin: 0 5px;*/
        /*font-weight: 600;*/
    }
    .menu{
        margin: 0 9px;
        cursor: pointer;
    }
    .folder{
        font-size: 18px;
        margin-left: 3px;
    }
    .menu>span{
        font-size: 14px;
        margin: 0;
        margin-left: 6px;
    }
    .active{
        background-color: rgb(66,128,217);
    }
    #menu-bar{
        position: absolute;
        top: 48px;
        left: 0;
        /*border-radius: 10px;*/
        border-radius: 0 0 10px 10px;
        width: 140px;
        /*height: 200px;*/
        background-color: white;
        border: 1px solid hsla(0, 0%, 0%, 0.15);
        border-top: 2px solid hsla(0, 0%, 0%, 0.15);
        box-shadow: 0 8px 8px 0 hsla(0, 0%, 0%, 0.15);
    }
    .menu-wrap{
        list-style-type: none;
        width: 100%;
        text-align: left;
        padding: 0;
        margin: 0;
    }
    .menu-item{
        font-family: "Microsoft YaHei UI",serif;
        height: 50px;
        display: block;
        line-height: 50px;
        cursor: pointer;
        padding-left: 15px;
        font-size: 14px;
        letter-spacing: 1px;
        /*font-family: HelveticaNeue,serif;*/
        color: rgb(100,100,100);
    }
    .menu-item:hover{
        background-color: rgb(228,240,255);
    }
    .menu-item:hover:last-child{
        border-radius: 0 0 10px 10px;
    }
    #files{
        display: none;
    }
</style>
